<!--
 * @Author: xjt
 * @Date: 2021-06-24 23:10:47
 * @LastEditTime: 2021-06-24 23:11:24
 * @Description: 人员接收跟踪
 * @LastEditors: xjt
-->
<template>
  <basic-container v-loading="loading" element-loading-text="数据加载中...">
    <dataList
      :pageInfo="pager"
      :listData="tableData"
      :menuList="[]"
      searchName="hotelName"
      @menu-click="handleMenuClick"
      :filterList="filterList"
      :dataInfo="dataInfo"
      :openIndex="true"
      :operaInfo="operaInfo"
      @btn-click="handleBtnClick"
      operaColumnWidth="120"
      placeholder="请输入隔离点名称"
    ></dataList>

    <hotelDialog width="1000px" :popUpdata="popUpdata" ref="hotelDialog" @submit="submit" @close="close"></hotelDialog>

    <detail width="70%" ref="detail" @submit="submitEx" @close="closeEx" :footer="false" :tabs="tabs" :houseData="houseData" :defaultIndex="2"></detail>
  </basic-container>
</template>
<script>
import {
  getpageHouseInfo,
  addjdglhotelhousexsqkinfo,
} from '@/views/yq-personnel/api/check.js';
import { mapGetters } from 'vuex';
import { tableOption } from './const';
import hotelDialog from './dialog';
import detail from '../module/detail';
import { extractName, conversion } from '@/utils/extract';
import { mapState } from 'vuex';

export default {
  components: {
    hotelDialog,
    detail,
  },
  provide () {
    return {
      //初始化数据
      initList: this.queryData,
    };
  },
  beforeMount () {
    this.queryData();
    this.popUpdata[2].value = this.user.realName;
  },
  data () {
    return {
      tabs: [
        {
          name: '隔离点房间信息',
          value: 0,
          components: 'roomInformation',
          formData: {},
        },
        { name: '房间使用记录', value: 1, components: 'roomRecord' },
        { name: '消杀情况登记', value: 2, components: 'disinfect' },
      ],
      // 表格列表数据
      tableData: [],
      // 请求参数
      params: {
        current: 1,
        size: 20,
        keyword: '',
      },
      // 选中的数据
      selectDataArr: [],
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 20, // 每页显示多少条
      },
      // 当前房间数据
      houseData: {},
      // 页面loading
      loading: false,
      tableCols: tableOption.column,
      filterList: tableOption.filterList,
      popUpdata: [
        {
          label: '消杀时间',
          value: '',
          key: 'xsTime',
          type: 'datetime',
          rules: [
            { required: true, message: '请输入消杀时间', trigger: 'blur' },
          ],
        },
        {
          label: '消杀人', value: '', key: 'xsPerson', type: 'input',
          rules: [
            { required: true, message: '请输入消杀人', trigger: 'blur' },
          ],
        },
        {
          label: '登记人',
          value: '',
          key: 'creapers',
          type: 'input',
          state: 'disabled',
        },
        {
          label: '备注',
          value: '',
          key: 'remark',
          type: 'textarea',
          class: 'full',
        },
      ],
    };
  },
  computed: {
    ...mapGetters(['permissions']),
    ...mapState({
      user: (state) => state.user.user,
    }),
    // 表格展示数据
    dataInfo () {
      return [
        { label: '隔离点名称', prop: 'hotelName' },
        { label: '所属区划', prop: 'hotelStreet',width:"140px" },
        { label: '楼层', prop: 'roomFloor',width:"80px" },
        { label: '房间号', prop: 'roomNum' ,width:"80px"},
        { label: '使用类型', prop: 'useType', formatter: this.dataFormatter ,width:"140px"},
        { label: '房间状态', prop: 'roomState', formatter: this.dataFormatter,width:"100px" },
        { label: '备注', prop: 'remark'},
      ];
    },
    // 操作按钮
    operaInfo () {
      return [{ label: '消杀登记' }, 'preview'];
    },
  },
  methods: {
    // 加零
    addzero (val) {
      if (val < 10) {
        return `0${val}`;
      }
      return val;
    },
    nowDate () {
      const time = new Date();
      const timeNow = `${time.getFullYear()}-${this.addzero(
        time.getMonth() + 1
      )}-${this.addzero(time.getDate())} ${this.addzero(
        time.getHours()
      )}:${this.addzero(time.getMinutes())}:${this.addzero(time.getSeconds())}`;
      return timeNow;
    },
    async submit () {
      const data = conversion(this.popUpdata);
      data['creatime'] = this.nowDate();
      data['moditime'] = this.nowDate();
      data['houseId'] = this.houseData.houseId;

      if (!data.xsTime) {
        this.$message.warning('请选择消杀时间');
        return
      }
      if (!data.xsPerson) {
        this.$message.warning('请输入消杀人');
        return
      }
      const val = await addjdglhotelhousexsqkinfo(data);
      if (val.data.code == 0) {
        this.$message.success('登记成功');
        this.queryData()
        this.$refs.hotelDialog._data.dialogVisible = false;
      }
    },
    close () {
      this.popUpdata = this.$options.data().popUpdata;
    },
    closeEx () { },
    submitEx () { },
    // 数据请求
    queryData (params = {}) {
      this.loading = true;
      let requestData = { ...this.params, ...params, roomState: '31' };
      getpageHouseInfo(requestData)
        .then((res) => {
          const { current, size, total, records } = res.data.data;
          this.tableData = records;
          this.params = requestData;
          this.pager = { total, current, size };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    dataFormatter (row, column, cellValue) {
      switch (column.property) {
        case 'useType':
          return extractName('use_type', row.useType);
        case 'roomState':
          return extractName('room_state', row.roomState);
        default:
          break;
      }
    },
    //表格按钮点击事件监听
    handleBtnClick ({ type, row = {} }) {
      this.houseData = Object.assign(new Object(), row);
      if (type === 'preview') {
        this.tabs[0].formData = row;
        this.$refs.detail.changeVisible();
        return;
      }
      this.popUpdata[2].value = this.user.realName;
      this.popUpdata[0].value = this.nowDate();
      this.$refs.hotelDialog.show({
        type: 'add',
      });
    },
    // handleBtnClick(){

    // },

    // 菜单点击监听
    handleMenuClick (type) {
      switch (type) {
        case 'export':
          // 导出
          /*   this.publicExport(
            row.fileName,
            `/admin/sys-file/download/${row.bucketName}/${row.id}`
          ); */
          break;
        default:
          this.$message(type);
          break;
      }
    },
    // 获取索引值
    getIndex (index) {
      const { current = 0, size = 0 } = this.pager;
      return (current - 1) * size + (index + 1);
    },
    // 删除数据
    async deleteData (data) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          try {
            await deleteQuestion(data);
            this.$message.success('删除成功!');
            this.queryData({ current: 1 });
          } catch (error) {
            this.$message.fail('删除失败!');
          }
        })
        .catch(() => {
          this.$message.info('已取消删除');
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.operateMain {
  /deep/ .top-buttons {
    float: right;
    width: 50%;
  }
  /deep/ .v-search {
    width: 50%;
    justify-content: flex-start;
  }
  /deep/ .operaColumn .el-button {
    color: var(--color);
  }
}
</style>
